<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta http-equiv="Cache-Control" content="no-siteapp" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>网站建设框架预览</title>
    <style>
        h2{ font-size: 18px;}
    </style>
</head>
<body>

    <div  style="padding: 1em 3em 0 2em; text-align: left;  line-height: 2em; font-size:16px;">
        
        <div style="border: 1px solid #e2e2e2;
        background-color: #fdffe0;
        border-radius: 2px;
        padding: 0 1em;">
            <p>尊贵的客户，您好，<br>这里提供的网页是<b>原型设计</b> ，是用于说明网页的构造和框架设计的。因此里面的文字、图片等都不是最终结果，请知悉。
                <br>
               请选择合适的方案，也可以将两个方案优秀部分合并。请将反馈意见汇总后进一步沟通。 
            </p>
            <p style="">—— 柳州智晶信息科技有限公司</p>
        </div>

        <h2><li><a href="./tiande-a/index.html" target="_blank">广西天安德环工程咨询有限公司 方案A</a> √ </li></h2>
        <h2><li><a href="./tiande-b/index.html" target="_blank">广西天安德环工程咨询有限公司 方案B</a></li></h2>

        <h2><li><a href="./48-a/index.html" target="_blank">广西肆捌传媒有限公司 方案A</a></li></h2>
        <h2><li><a href="./48-b/index.html" target="_blank">广西肆捌传媒有限公司 方案B</a> √ </li></h2>

        <h2><li><a href="./wanjian-a/index.html" target="_blank">广西万检科技有限公司 方案A</a></li></h2>
        <h2><li><a href="./wanjian-b/index.html" target="_blank">广西万检科技有限公司 方案B</a> √ </li></h2>

        <h2><li><a href="./pinyou-a/index.html" target="_blank">广西品宥投资有限公司 方案A</a></li></h2>
        <h2><li><a href="./pinyou-b/index.html" target="_blank">广西品宥投资有限公司 方案B</a> √ </li></h2>
    
    </div>

</body>
</html>

<script>
    /**
    * 浏览器支持
    */
    var BrowserDetect = {
        init: function (noSupportItems, callback){
            var browserInfo = this.getBrowserInfo();
            var b = browserInfo.browser;   // 浏览器类型转换小写
            var v = browserInfo.version;   // 版本号取整数
            var isSupport = this.isSupport(b, v, noSupportItems);
            if( !isSupport ){
                // console.log("当前浏览器不支持！");
                this.showTips(b, v);
            }
            callback && callback(isSupport);
        },

        /**
        * 浏览器版本检测
        * return Object
        */
        getBrowserInfo: function(){
            var s;
            var Sys = {};
            var browserInfo = {
                browser: "unknown browser",
                version: "unknown version"
            }

            var ua = navigator.userAgent.toLowerCase();
            (s = ua.match(/rv:([\d.]+)\) like gecko/)) ? Sys.ie = s[1] :
            (s = ua.match(/msie ([\d.]+)/)) ? Sys.ie = s[1] :
            (s = ua.match(/firefox\/([\d.]+)/)) ? Sys.firefox = s[1] :
            (s = ua.match(/chrome\/([\d.]+)/)) ? Sys.chrome = s[1] :
            (s = ua.match(/opera.([\d.]+)/)) ? Sys.opera = s[1] :
            (s = ua.match(/version\/([\d.]+).*safari/)) ? Sys.safari = s[1] : 0;

            for(var type in Sys){
                browserInfo.browser = type;
                if(Sys[type] && Sys[type] !=='') {
                    browserInfo.version = Sys[type];
                }
            }
            return browserInfo;
        },

        isSupport: function(browser, version, noSupportItems){
            var _isSupport = true;
            var _version = parseFloat(version);
            if(noSupportItems && noSupportItems[browser] ){
                var items = noSupportItems[browser];
                for ( var item in items ) {
                    if( items[item] === _version ){
                        _isSupport = false;
                    };
                }
            }
            return _isSupport;
        },

        // 不支持的浏览器列表
        // noSupportItems: {
        //     ie: [9, 8, 7, 5, 6],
        // },

        showTips: function(browser, version){
            var tipsStyle =
                '<style>'
                +'   .browser-tips-warp{position:fixed;top:0;left:0;width:100%;height:100%;background:#fff;z-index:11}'
                +'   .browser-tips{border:1px solid #ccc;width:500px;height:220px;background:#fff;position:absolute;top:45%;left:0;right:0;margin:-110px auto auto auto;color:#333;padding:30px;z-index:10}'
                +'   .browser-tips h3{margin:20px auto}'
                +'   .browser-tips .curr-browser-logo{max-height:100px;vertical-align:top}'
                +'   .browser-tips ul{margin:0;width:auto;height:auto;display:inline-block;list-style: none;margin:0;padding:0;}'
                +'   .browser-tips ul li{width:122px;height:120px;float:left;text-align:center;}'
                +'   .browser-tips .browser-logo{ width:36px; border:0 solid red;display:inline-block}'
                +'   .browser-name{width:100%}'
                +'   .browser-logo.chrome{background:url("../img/browser/chrome.jpg") center no-repeat}'
                +'</style>';

            var tipsStr =
                '<div class="browser-tips-warp">'
                +'  <div class="browser-tips">'
                +'    <span class="curr-browser-info">当前浏览器：'+ browser + version +'</span>'
                +'    <h3>您当前的浏览器因老旧暂时不受支持，请使用以下浏览器打开</h3>'
                +'    <ul>'
                +'	      <li><img class="browser-logo" src="./static/img/logo-chrome.png"></img>'
                +'		  <div>谷歌浏览器</div></li>'
                +'	      <li><img class="browser-logo" src="./static/img/logo-firefox.png"></img>'
                +'		  <div>火狐浏览器</div></li>'
                +'	      <li><img class="browser-logo" src="./static/img/logo-360.png"></img>'
                +'		  <div>360浏览器<br>（极速模式）</div></li>'
                +'	      <li><img class="browser-logo" src="./static/img/logo-qq.png"></img>'
                +'		  <div>QQ浏览器<br>（极速模式）</div></li>'
                +'    </ul>'
                +'    <p>如果已经在以上浏览器打开，请切换为高速模式</p>'
                +'  </div>'
                +'</div>';

            // var el = document.createElement('div');
            // el.html = tipsStr;
            document.write(tipsStyle+tipsStr);
        },

        getBrowserLogoUrl: function(browser, version){
            var url = "./src/component/main/img/browser/"; // logo的绝对路径
            if (browser === "ie") {
                return url + browser +"_"+ version +".jpg";
            }
            else {
                return url + browser +".jpg";
            }
        }
    }


    var noSupportItems = {ie: [ 10, 9, 8, 7, 5, 6]}
        BrowserDetect.init(noSupportItems);


</script>